import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'

// Element Plus
import ElementPlus from 'element-plus'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

// 样式 - 先导入Element Plus基础样式，再导入我们的自定义样式
import 'element-plus/dist/index.css'
import './styles/index.scss'

// 工具
import { setupDirectives } from './utils/directives'
import { setupErrorHandler } from './utils/errorHandler'

// 进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 配置进度条
NProgress.configure({
  easing: 'ease',
  speed: 500,
  showSpinner: false,
  trickleSpeed: 200,
  minimum: 0.3
})

console.log('开始创建Vue应用...')

const app = createApp(App)

// 注册Element Plus图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

// 安装插件
app.use(createPinia())
app.use(router)
app.use(ElementPlus, {
  locale: zhCn,
  size: 'default',
  zIndex: 3000
})

// 设置全局指令
setupDirectives(app)

// 设置全局错误处理
setupErrorHandler(app)

// 全局属性
app.config.globalProperties.$ELEMENT = { size: 'default', zIndex: 3000 }

// 开发环境配置
if (import.meta.env.DEV) {
  app.config.globalProperties.$log = console.log
  app.config.performance = true
}

// 全局错误处理
app.config.errorHandler = (err, instance, info) => {
  console.error('Vue Error:', err)
  console.error('Component:', instance)
  console.error('Info:', info)
}

// 全局警告处理
app.config.warnHandler = (msg, instance, trace) => {
  console.warn('Vue Warning:', msg)
  console.warn('Component:', instance)
  console.warn('Trace:', trace)
}

console.log('准备挂载应用...')

// 安全的DOM操作函数
function safeMount() {
  try {
    // 确保DOM完全加载
    const appElement = document.getElementById('app')
    if (!appElement) {
      console.error('找不到#app元素')
      return
    }
    
    // 添加DOM保护
    const originalQuerySelector = document.querySelector
    document.querySelector = function(selector) {
      try {
        const element = originalQuerySelector.call(this, selector)
        if (element && typeof element === 'object') {
          // 为元素添加style保护
          if (!element.hasOwnProperty('_styleProtected')) {
            Object.defineProperty(element, 'style', {
              get: function() {
                return this._safeStyle || (this._safeStyle = {})
              },
              set: function(value) {
                this._safeStyle = value
              },
              configurable: true,
              enumerable: true
            })
            element._styleProtected = true
          }
        }
        return element
      } catch (e) {
        console.warn('querySelector错误:', e)
        return null
      }
    }
    
    // 挂载应用
    app.mount('#app')
    console.log('应用已挂载到 #app')
    
    // 延迟移除加载动画并强制路由跳转
    setTimeout(() => {
      try {
        const loadingElement = document.querySelector('.loading')
        if (loadingElement && loadingElement.parentNode) {
          loadingElement.parentNode.removeChild(loadingElement)
          console.log('已移除加载动画')
        }
        
        // 在file://协议下强制跳转到登录页面
        if (window.location.protocol === 'file:') {
          console.log('检测到file://协议，当前hash:', window.location.hash)
          console.log('强制跳转到登录页面')
          // 强制替换当前路由到登录页面
          router.replace('/login').then(() => {
            console.log('路由跳转成功')
          }).catch(err => {
            console.error('路由跳转失败:', err)
          })
        }
      } catch (e) {
        console.warn('移除加载动画或路由跳转失败:', e)
      }
    }, 200)
    
  } catch (error) {
    console.error('应用挂载失败:', error)
    // 降级处理
    try {
      app.mount('#app')
    } catch (fallbackError) {
      console.error('降级挂载也失败:', fallbackError)
    }
  }
}

// 确保DOM加载完成后再挂载
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', safeMount)
} else {
  // DOM已经加载完成
  setTimeout(safeMount, 0)
}

// 控制台输出
console.log(
  '%c超市商品溯源管理系统',
  'color: #2563eb; font-size: 16px; font-weight: bold;'
)
console.log(
  '%c系统版本: 1.0.0',
  'color: #059669; font-size: 12px;'
)
console.log(
  '%c开发环境: ' + import.meta.env.MODE,
  'color: #dc2626; font-size: 12px;'
)